<template>
  <el-container class="main-container">
    <!-- 普通页面的布局，包括 Header 和 Footer -->
    <el-header height="60px" class="header">
      <div class="header-nav">
        <div class="header-logo">
          <img src="@/assets/buddy_logo.png" alt="友友学社 Logo" class="logo-img" />
          <div class="logo-text">
            <span class="logo-main">友友空间</span>
            <span class="logo-sub">———— 友友学社官方社群运营工具</span>
          </div>
        </div>
        <div class="nav-tabs">
          <router-link to="/" class="nav-tab" active-class="active">首页</router-link>
          <router-link to="/space" class="nav-tab" active-class="active">空间</router-link>
          <router-link to="/activity" class="nav-tab" active-class="active">活动</router-link>
          <router-link to="/resource" class="nav-tab" active-class="active">资源</router-link>
          <router-link to="/tool" class="nav-tab" active-class="active">工具</router-link>
        </div>
        <div class="nav-actions">
          <router-link to="/login" class="nav-action-btn" active-class="active">登录</router-link>
          <router-link to="/settings" class="nav-action-btn" active-class="active">设置</router-link>
        </div>
      </div>
    </el-header>

    <el-main class="content">
      <router-view />
    </el-main>

    <el-footer height="50px" class="footer">
      <div>《友友学社》论坛初版设计方案</div>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  name: 'System',
};
</script>

<style scoped>
/* 页面整体样式重置 */
html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}
.main-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
/* 导航栏样式 */
.header {
  background-color: #4caf50; /* 修改为绿色 */
  color: white;
  display: flex;
  align-items: center; /* 整体内容垂直居中 */
  padding: 0 20px;
}

.header-nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center; /* 导航栏内部元素垂直居中 */
}

.header-logo {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  gap: 10px; /* 控制 logo 和文字之间的间距 */
}

.logo-img {
  width: 40px; /* 调整 logo 图片宽度 */
  height: 40px; /* 调整 logo 图片高度 */
}

.logo-text {
  display: flex;
  flex-direction: column; /* 文字垂直排列 */
  line-height: 1.2; /* 调整行高 */
}

.logo-main {
  font-size: 20px; /* 主标题字体大小 */
  font-weight: bold; /* 主标题字体加粗 */
  color: white; /* 主标题颜色 */
}

.logo-sub {
  font-size: 12px; /* 副标题字体大小 */
  color: #e0e0e0; /* 副标题颜色，使用浅灰色 */
}

/* 导航页签样式 */
.nav-tabs {
  display: flex;
  gap: 20px; /* 页签之间的间距 */
}

.nav-tab {
  font-size: 16px; /* 页签字体大小 */
  padding: 10px 15px;
  color: white; /* 默认文字颜色 */
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 2px solid transparent; /* 初始无底部边框 */
  text-decoration: none; /* 移除默认链接样式 */
}

.nav-tab:hover {
  background-color: rgba(255, 255, 255, 0.2); /* 悬停时浅绿色背景色 */
  border-bottom: 2px solid white; /* 悬停时显示底部边框 */
}

.nav-tab.active {
  background-color: white; /* 选中时页签背景色变为白色 */
  color: #4caf50; /* 选中时文字颜色变为绿色 */
  border-bottom: 2px solid #4caf50; /* 底部边框为主色调绿色 */
}

/* 登录和设置按钮样式 */
.nav-actions {
  display: flex;
  gap: 10px; /* 按钮之间的间距 */
}

.nav-action-btn {
  background-color: rgba(255, 255, 255, 0.2); /* 按钮初始背景色 */
  color: white;
  border: none;
  border-radius: 20px; /* 圆角 */
  padding: 8px 16px;
  transition: all 0.3s ease;
  text-decoration: none; /* 移除默认链接样式 */
}

.nav-action-btn:hover {
  background-color: rgba(255, 255, 255, 0.4); /* 悬停时背景色变浅 */
  color: #4caf50; /* 悬停时文字颜色变为绿色 */
}

.nav-action-btn.active {
  background-color: rgba(255, 255, 255, 0.6); /* 选中时背景色更浅 */
  color: #4caf50; /* 选中文字颜色为绿色 */
}

/* 内容区样式 */
.content {
  flex: 1;
  padding: 0px;
  width: 100%;
}

/* 页脚样式 */
.footer {
  background-color: #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
</style>
